<include file="./Template/Admin/header.html" title="用户组列表" />
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>分组列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-2">
                                <a href="{:U('Admin/group/add')}" class="btn btn-outline btn-primary">添加用户组</a>
                            </div>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户组</th>
                                    <th>权限</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="pageView">
                            <!--异步请求分页形式  内容从 laypage后台获取pageList方法获取-->

                            </tbody>
                        </table>
                        <!--laypage 分页-->
                        <div id="pageList" style="text-align: center;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__ADMIN__js/jquery.min.js"></script>
    <script src="__ADMIN__js/bootstrap.min.js"></script>
    <script src="__ADMIN__js/plugins/layer.3/layer.js"></script>
    <script src="__ADMIN__js/plugins/laypage/laypage.js"></script>
    <script src="__ADMIN__js/common.js"></script>

    <script>
        $(function(){
            /**
             * 更改管理员状态
             */
            statusChange = function(id){
                common.ajaxStatusChange("{:U('Admin/group/statusChange')}", id, $('#status' + id));
            };

            /**
             * 删除管理员
             * @param id
             */
            del = function(id){
                common.ajaxDel("{:U('Admin/group/del')}",id,"{:U('Admin/group/index')}");
            };

            /**
             * layui  jquery.ajax 异步请求式分页
             */
            //以下将以jquery.ajax为例，演示一个异步分页
            //实现异步分页 则搜索按钮  type改为了button 防止跳转
            var page = 1;
            function demo(curr){
                $.getJSON(
                        "{:U('Admin/group/pageList')}",
                        {
                            page: curr || 1 //向服务端传的参数，此处只是演示
                        },
                        function(res){
                            //此处仅仅是为了演示变化的内容
                            var demoContent = (new Date().getTime()/Math.random()/1000)|0;
                            document.getElementById('pageView').innerHTML = res.content;
                            //显示分页
                            laypage({
                                cont: 'pageList', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                                pages: res.pages, //通过后台拿到的总页数
                                curr: curr || 1, //当前页
                                skip: true,
                                skin: '#009688',
                                jump: function(obj, first){ //触发分页后的回调
                                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                        demo(obj.curr);
                                    }
                                }
                            });
                        });
            }
            //运行
            demo();
        });
    </script>
</body>
</html>
